<template>
  <el-dialog top="80px"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false">
    <el-container>
      <el-main :style="{ 'max-height': maxHeightDialog }"
        class="container-main">
        <t-detail v-if="detailList.length != 0"
          :list="detailList"
          :is-title="true"
          :title="'基本信息'"
          :is-card-border="true">
          <template v-if="item.value != ''"
            slot="status"
            slot-scope="{ item }">
            <el-tag size="medium"
              :style="item.value | constantKeyTagStyleObj('DEVICE_STATUS')">
              {{ item.value | constantKeyValue('DEVICE_STATUS') }}
            </el-tag>
          </template>

          <template v-if="item.value != ''"
            slot="deviceRunningState"
            slot-scope="{ item }">
            <el-tag size="medium"
              :style="
                item.value | constantKeyTagStyleObj('DEVICE_RUNNING_STATE')
              ">
              {{ item.value | constantKeyValue('DEVICE_RUNNING_STATE') }}
            </el-tag>
          </template>

          <template v-if="item.value != ''"
            slot="manufacturingDate"
            slot-scope="{ item }">
            {{ item.value | datefmt('YYYY-MM-DD') }}
          </template>
          <template v-if="item.value != null"
            slot="active"
            slot-scope="{ item }">
            <el-tag size="medium"
              :style="item.value | constantKeyTagStyleObj('BOOL_TYPE')">
              {{ item.value ? '已激活' : '未激活' }}
            </el-tag>
          </template>
        </t-detail>
        <div>
          <div class="title">
            <span>设备属性</span>
          </div>
          <el-card class="card"
            shadow="never">
            <div class="attribute-list">
              <device-attribute-list :source-list="attributeList" />
            </div>
          </el-card>
        </div>
      </el-main>
      <el-footer>
        <el-button size="medium"
          icon="el-icon-close"
          style="width: 120px"
          @click="isVisible = false">
          关闭
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>
<script>
import DeviceAttributeList from './AttributeList'
import TDetail from '@/components/TDetail'

import dataDetailMixins from '@/mixins/data-detail-mixins'

import deviceManageApi from '@/api/device-manage'

export default {
  name: 'DeviceDetail',
  components: {
    DeviceAttributeList,
    TDetail,
  },
  mixins: [dataDetailMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data () {
    return {
      attributeList: [],
      detailList: this.getDetailList('start'),
    }
  },
  computed: {
    isVisible: {
      get () {
        return this.dialogVisible
      },
      set () {
        this.toClose()
      },
    },
  },
  watch: {
    // detailObj:function(val) {
    //   this.getDetailList()
    // }
  },
  created () {
    // this.getDetailList()
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    getDetail () {
      const p1 = deviceManageApi.getDeviceDetail({
        id: this.params.item.id
      })
      const p2 = deviceManageApi.getDictValueAttr({
        fieldName: 'collect_type',
        tableName: 't_equipment_collect',
      })
      const p3 = deviceManageApi.getDictValueAttr({
        fieldName: "communication_type",
        tableName: "t_communication"
      })
      const p4 = deviceManageApi.getGateway({
        pageNum: 1, pageSize: 99999
      })

      Promise.all([p1, p2, p3, p4]).then((p) => {
        this.detailObj = p[0].data.data
        this.attributeList = this.detailObj.equipmentAttributes

        const deviceTypeData = p[1].data.dictValue
        const deviceTypeList = deviceTypeData.filter(
          (e) => e.dictValue === Number(this.detailObj.deviceType)
        )
        if (deviceTypeList.length > 0) {
          this.detailObj['deviceTypeStr'] = deviceTypeList[0].dictText
        }

        const communicationData = p[2].data.dictValue
        const communicationList = communicationData.filter(
          (e) => e.dictValue === Number(this.detailObj.communicationType)
        )
        if (communicationList.length > 0) {
          this.detailObj['communicationTypeStr'] = communicationList[0].dictText
        }

        const gatewayList = p[3].data.data.rows
        if (this.detailObj.gatewayId) {
          const item = gatewayList.find((val) => {
            return val.id == this.detailObj.gatewayId
          })
          if (item) {
            this.detailObj.gatewayName = item.gatewayName
          }
        }


        this.detailList = this.getDetailList('')
      })
    },

    getDetailList (type) {
      const list = [
        [
          {
            text: '所属部门',
            value: type === 'start' ? '' : this.detailObj.deptName,
          },
          {
            text: '所属网格',
            value: type === 'start' ? '' : this.detailObj.gridMountFullPathText,
          },
        ],
        [
          {
            text: '设备区分',
            value: type === 'start' ? '' : this.detailObj.deviceIsLine ? '智能无线' : '传统有线',
          },
          {
            text: '设备类型',
            value: type === 'start' ? '' : this.detailObj.deviceTypeStr,
          },
        ],

        [
          {
            text: '消防主机编码',
            value: type === 'start' ? '' : this.detailObj.hostId,
          },
          {
            text: '消防主机名称',
            value: type === 'start' ? '' : this.detailObj.hostName,
          },
        ],
        [
          {
            text: '通讯类型',
            value: type === 'start' ? '' : this.detailObj.communicationTypeStr,
          },
          {
            text: '关联网关',
            value: type === 'start' ? '' : this.detailObj.gatewayName,
          },
        ],

        [
          {
            text: '设备编码',
            value: type === 'start' ? '' : this.detailObj.deviceCode,
          },
          {
            text: '设备内部编码',
            value: type === 'start' ? '' : this.detailObj.deviceSource,
          },
        ],
        [
          {
            text: '设备名称',
            value: type === 'start' ? '' : this.detailObj.deviceName,
          },
          {
            text: '设备型号',
            value: type === 'start' ? '' : this.detailObj.deviceModel,
          },
        ],

        [
          {
            text: '设备使用情况',
            value: type === 'start' ? '' : this.detailObj.status,
            slotName: 'status',
            isTag: true,
          },
          {
            text: '设备运行状态',
            value: type === 'start' ? '' : this.detailObj.deviceRunningState,
            slotName: 'deviceRunningState',
            isTag: true,
          },
        ],
        [
          {
            text: '设备是否激活',
            value: type === 'start' ? null : this.detailObj.isActive,
            slotName: 'active',
          },
          {
            text: '激活时间',
            value: type === 'start' ? '' : this.detailObj.activationTime,
          },
        ],
        [
          {
            text: '设备使用周期(年)',
            value: type === 'start' ? null : this.detailObj.lifeCycle ? this.detailObj.lifeCycle : '',
          },
          {
            text: '告警方式',
            value: type === 'start' ? '' : this.detailObj.alertMethod == 1 ? '允许重复告警' : '不允许重复告警',
          },
        ],

        [
          {
            text: '设备所在位置',
            value: type === 'start' ? '' : this.detailObj.deviceLocation,
          },

          {
            text: 'ip地址',
            value: type === 'start' ? '' : this.detailObj.ipAddr,
          },
        ],

        [
          {
            text: '经度',
            value: type === 'start' ? '' : this.detailObj.longitude,
          },
          {
            text: '纬度',
            value: type === 'start' ? '' : this.detailObj.latitude,
          },
        ],

        [
          {
            text: '厂家',
            value: type === 'start' ? '' : this.detailObj.manufactor,
          },
          {
            text: '生产日期',
            value: type === 'start' ? '' : this.detailObj.manufacturingDate,
            slotName: 'manufacturingDate',
          },
        ],

        [
          {
            text: '设备配置',
            value: type === 'start' ? '' : this.detailObj.deviceParameter,
          },
          {
            text: '所属区域编码',
            value: type === 'start' ? '' : this.detailObj.zoonId,
          },
        ],

        [
          {
            text: '所属运营商',
            value: type === 'start' ? '' : this.detailObj.operator,
          },
          {
            text: 'sim卡号',
            value: type === 'start' ? '' : this.detailObj.simNo,
          },
        ],
        [
          {
            text: '说明',
            value: type === 'start' ? '' : this.detailObj.description,
          },
          {
            text: '',
            value: '',
          },
        ],
        [
          {
            text: '创建时间',
            value: type === 'start' ? '' : this.detailObj.createdTime,
          },
          {
            text: '更新时间',
            value: type === 'start' ? '' : this.detailObj.updatedTime,
          },
        ],
      ]
      return list
    },
    toClose () {
      this.$emit('close')
    },
  },
}
</script>

<style lang="scss" scoped >
@import '../../../../../styles/part-custom';

.detail-div {
  border: 1px solid #d5dbe0;
  border-right: 0px solid #d5dbe0;
  border-bottom: 0px solid #d5dbe0;
}

.detail-row {
  border-bottom: 1px solid #d5dbe0;
  display: flex;
}

.detail-label {
  width: 20%;
  border-right: 1px solid #d5dbe0;
  padding: 4px;
  text-align: right;
  color: #525e8c;
  background: #f9fcfd;
}

.detail-value {
  width: 30%;
  border-right: 1px solid #d5dbe0;
  padding: 4px;
}

.attribute-list>>>.el-table td:last-child {
  border-left: 0px solid #ebeef5;
}
</style>
